<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">


$(window).load(function () {
    
    if('authenticated' in localStorage && localStorage['authenticated']=='1'){
        $("#workspace").show();
        scraps('');
    }
    else{
        setTimeout(window.close(), 300);
        chrome.extension.getBackgroundPage().auth();
    }
        
    
});

function timeToHuman(epoch)
{
    var theDate = new Date(epoch * 1000);
    return theDate.toGMTString();
    
}

function doIt() {
    
    chrome.extension.getBackgroundPage().orkut.sendScrap('00579001741238250164','teste');
}

function friends() {

    $("#tab .tab_item").removeClass("tab_sel");
    $("#tab .tab_item").removeClass("tab_unsel");
    
    $("#tab .tab_item").eq(1).addClass("tab_sel");
    $("#tab .tab_item").eq(0).addClass("tab_unsel");
    $("#tab .tab_item").eq(2).addClass("tab_unsel");

    var json = chrome.extension.getBackgroundPage().orkut.listFriends();
    if(json.length == 1) {
        $("#content").html("");
        $.each(json[0]['data']['list'], function() {
            $("#content").append('<div class="user">' +
                                    '<div class="cont"><img src="' + this.thumbnailUrl + '"></div>' +
                                    '<p>' + this.name.givenName + '</p>' +
                                    '<p>' + this.gender + ' ' + ('currentLocation' in this ? this.currentLocation.locality + ', ' + this.currentLocation.country : ' N/A') + '</p>' +
                                    '<p>Relationship: ' + ('relationshipStatus' in this ? this.relationshipStatus : ' N/A') + '</p>' +
                                    '<br />' +
                                 '</div>');
        });
    }
        
}

function grab50() {

    chrome.extension.getBackgroundPage().apoller(1);
    scraps('');
}

function scraps(uid) {

    $("#tab .tab_item").removeClass("tab_sel");
    $("#tab .tab_item").removeClass("tab_unsel");
    
    $("#tab .tab_item").eq(0).addClass("tab_sel");
    $("#tab .tab_item").eq(1).addClass("tab_unsel");
    $("#tab .tab_item").eq(2).addClass("tab_unsel");

    var background = chrome.extension.getBackgroundPage();
    
    $("#content").html("");
    
    
    // ok, safe to update
    if(!background.lockScrap) {
    
        // block updates until we finish this up
        background.lockScrap = true;
        
        var json = background.scrapScreen;
        console.log(json.length);
        
        
        // backwards
        if(json.length > 0) {
        
            for(var i=json.length-1; i>=0; i--)
            {   
                $('#content').append('<div class="user">' +
                                        '<div class="cont"><img src="' + json[i].thumb + '" title="'+ json[i].user +'"></div>' +
                                        '<div class="msg"><p><a href="#" title="Click to reply">Received on ' + timeToHuman(json[i].time) + '</a></p>' + json[i].body + '</div>' +
                                        '<div style="display:none">' +
                                        '   <ul>' +
                                        '       <li>' + json[i].user_id + '</li>' +
                                        '       <li>' + json[i].user + '</li>' +
                                        '       <li>' + json[i].id + '</li>' +
                                        '   </ul>' +
                                        '</div>' +
                                        '<br />' +
                                     '</div>');
            }
        }
        else {
            $('#content').append('<p>No new scraps found. <a href="javascript:grab50()">Grab last 50</a></p>');
        }
        
        // ask background to clear its pool.
        background.clearPool();
        
        // unlock
        background.lockScrap = false;
        
    }
    
    
    // bind click to the scrap items.
    $(".user a").bind('click', function() {
    
        if( $("#send_scrap").is(":visible") )
            $("#send_scrap").animate({height:'toggle'}, 1000, function(){});
        else {
            
            $("#send_scrap").animate({height:'show'}, 1000, function(){
                $("#msg_user").focus();
            });
            
            var user_id  = $(this).parents(".user").find("ul li:eq(0)").text();
            var user     = $(this).parents(".user").find("ul li:eq(1)").text();
            var scrap_id = $(this).parents(".user").find("ul li:eq(2)").text();
            
            // fill Replying to: user
            $("#to_user").val("Replying to: " + user);
            
            // hidden fields
            $("#user_id").val( user_id );
            $("#scrap_id").val( scrap_id );
        }
    });

}
var xpto;
function sendScrap() {

    var user_id  = $("#user_id").val();
    var scrap_id = $("#scrap_id").val();
    var msg = $("#msg_user").val();

    // just a sanity check
    if(user_id == '')
        window.alert('Fail whale. Something went wrong, sorry!');
    else if ( msg == '' )
        window.alert( 'Message cannot be empty') ;
    else {
    
        var ret;
        
        
        // we are replying
        if( scrap_id != '')
            ret = chrome.extension.getBackgroundPage().orkut.replyScrap( user_id, msg, scrap_id );
            
        //normal scrap
        else
            ret = chrome.extension.getBackgroundPage().orkut.sendScrap( user_id, msg );
        
        
        // error!
        if('error' in ret[0]) {
        
            // captcha
            if( ret[0].code == 401 && ret[0].error.message.indexOf('unauthorized') != -1 ) {
                var captchaUrl = ret[0].error.data.captchaUrl;
                var captchaToken = ret[0].error.data.captchaToken;
            }
            else 
                alert('Error! ' + ret[0].error.message);
                
        }
        else if('data' in ret[0])
            alert('Message sent');
           
    }
}

// cleanup
function cancelScrap() {
    $('#send_scrap').animate({height:'toggle'}, 1000, function(){
        $("#to_user").val('');
        $("#msg_user").val('');
        $("#user_id").val('');
        $("#scrap_id").val('');
    });
}

</script>
<style type="text/css">
body {
	color:black;
	margin: 0; font-family: verdana; font-size: 11px
}

#workspace {
	position: relative;
    overflow-x: hidden;
}

#content {
    overflow-y: auto;
    height: 300px;
    width: 550px;
    overflow-x: hidden;
    margin-top: 8px;
}

.user{ width: 530px; border-bottom: 1px dotted #000; margin-bottom: 10px}
.user .cont { width: 70px;  margin-right: 10px; float:left; height: 70px; overflow: hidden}
.user p { margin: 0; padding: 0}
.user .msg { width: 450px; overflow: auto; float: left }
.user .cont img {overflow: hidden }
.user br { clear: both }

a{text-decoration:none; color: #000}

/* tab */

#tab { height: 33px; background: #efefef }
#tab .tab_item{float: left; margin-left: 2px; background-color: #c0c0c0; height: 30px; width: 80px; text-align: center; line-height: 30px; border-radius:5px}

#tab .opt { float: right; margin-right: 10px }
#tab .opt ul { list-style: none }
#tab .opt ul li { display: inline; padding-right: 10px; margin-right: 10px ; border-right: 1px dotted  }

.tab_sel {background: #8a8a8a !important }
.tab_unsel { height: 25px !important; margin-top: 2px }

#send_scrap {display:none;background: #efefef; padding-top: 10px; padding-bottom: 10px; width: 550px; padding-left: 10px}
#send_scrap p { margin:0; padding: 0; float: left; width: 40px;}
#send_scrap input[type='text']{width: 300px}
#send_scrap textarea{width: 450px; height: 120px}


</style>
</head>
<body>

<div id="workspace">
    <div id="tab">
        <div class="tab_item"><a href="javascript:scraps('');">MY SCRAPS</a></div>
        <div class="tab_item tab_sel"><a href="javascript:friends()">FRIENDS</a></div>
        <div class="tab_item">UPDATES</div>
        
        <div class="opt">
            <ul>
                <li>Refresh</li>
                <li>Options</li>
                <li>Logout</li>
                <li>About</li>
            </ul>
        </div>
        
    </div>
    <div id="send_scrap">
    
        <div class="ct">
            <p>To: </p>
            <input type="text" id="to_user" readonly>
        </div>
        
        <div class="ct">
            <p>Msg: </p>
            <textarea id="msg_user"></textarea>
        </div>
        
        <br />
        
        <input type="button" value="send" onclick="sendScrap();">
        <input type="button" value="cancel" onclick="cancelScrap();">
        
        <!-- hidden fields -->
        <input type="hidden" id="user_id" />
        <input type="hidden" id="scrap_id" />
        
    </div>
    <div id="content"></div>
</div>

</body>
</html>

